<template>
    <page-wrap>
        <template #extension>
            <!-- <z-tab v-model:active="tabActive" :tabList="tabList" top="13" @click-tab="onClickTab"></z-tab> -->
            <z-search placeholder="请输入内容" btn-text="查询" v-model="keyWord"
            @query="onQueryStoreStat"  @update:model-value="onUpdateVal"></z-search>
        </template>
        <div class="notice-container">
            <div class="notice-list">
                <div class="notice-item" v-for="v,k in configStore.msgList" :key="k">
                    <van-badge dot class="notice-item-dot" v-if="v.type==2 && v.dispose==0"></van-badge>
                    <div class="notice-item-main">
                        <!-- <div class="notice-item-cover" :style="{ backgroundImage: `url(${i_icon_system})` }"></div> -->
                        <div class="notice-item-cover" :style="{ backgroundImage: `url(${i_icon_customer})` }" v-if="v.memberMsgType == '001'"></div>
                        <div class="notice-item-cover" :style="{ backgroundImage: `url(${i_icon_save})` }" v-if="v.memberMsgType == '002'"></div>
                        <div class="notice-item-info">
                            <div class="notice-item-heading">
                              <!--  001 呼叫服务员  002 申请存酒 -->
                                <div class="notice-item-title">{{v.memberMsgType == '001' ? '客户呼叫':'存酒确认'}}</div>  
                                <div class="notice-item-subtitle">{{v.cruuentTime}}</div>
                            </div>
                            <div class="notice-item-desc" v-if="v.memberMsgType == '001'">{{v.content}}</div>
                            <div class="notice-item-desc" v-if="v.memberMsgType == '002'">{{v.content}}</div>
                        </div>
                    </div>
                    <div class="notice-item-panel">
                        <!-- <template v-if="v.type==2">
                            <template v-if="v.dispose==0">
                                <div class="notice-item-btn" @click="onDiposeCostomer(v, 2)">继续挂起</div>
                                <div class="notice-item-btn" @click="onDiposeCostomer(v, 1)">处理</div>
                            </template>
                            <template v-else>
                                <div class="notice-item-text">{{`${v.disposeMan}：已处理`}}</div>
                            </template>
                        </template> -->
                        <div class="notice-item-btn" @click="onDisposeWine(v)">处理</div>
                        <!-- <template v-if="v.type==3 || v.type==4">
                            <template v-if="v.dispose==0">
                                <div class="notice-item-btn" @click="onDisposeWine(v)">处理</div>
                            </template>
                            <template v-else>
                                <div class="notice-item-text">已处理</div>
                            </template>
                        </template> -->
                    </div>
                </div>
            </div>
        </div>
    </page-wrap>
</template>

<script setup>
import i_icon_system from '@/assets/images/notice/i_icon_system.png'
import i_icon_take from '@/assets/images/notice/i_icon_take.png'
import i_icon_save from '@/assets/images/notice/i_icon_save.png'
import i_icon_customer from '@/assets/images/notice/i_icon_customer.png'
import Api from '@/api'
import { closeWebSocket, initWebSocket, sendWebSocket } from '@/pkg/websocket'

import ls from '@/lib/ls'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()

const router = useRouter()
// type 1系统通知，2客户呼叫 3存酒确认 4取酒确认
const noticeList = ref([{
    cover: i_icon_system,
    title: '系统通知',
    subtitle: '1月11日 10:55',
    desc: '系统升级公告，最新版本1.2.0',
    type: '1',
},{
    cover: i_icon_take,
    title: '取酒确认',
    subtitle: '1月11日 10:55',
    desc: '有取酒信息需处理，点击去处理',
    type: '4',
    dispose: '0'
},{
    cover: i_icon_save,
    title: '存酒确认',
    subtitle: '1月11日 10:55',
    desc: '有存酒信息需处理，点击去处理',
    type: '3',
    dispose: '1'
},{
    cover: i_icon_customer,
    title: '客户呼叫',
    subtitle: '1月11日 10:55',
    desc: 'A001客户呼叫',
    type: '2',
    dispose: '0',
    disposeMan: '赵大运'
},{
    cover: i_icon_customer,
    title: '客户呼叫',
    subtitle: '1月11日 10:55',
    desc: 'A001客户呼叫',
    type: '2',
    dispose: '1',
    disposeMan: '赵大运'
}])
const tabActive = ref(0)
const tabList = [{
    name: '待处理',
}, {
    name: '已处理',
}]
const onDiposeCostomer = (v, type)=>{
    // type 1点击处理 2点击继续挂起
    // if (type==1) {
    //     v.dispose = 1
    // } else {
    //     v.dispose = 0
    // }
}
const keyWord = ref('')

// 寄存统计的搜索
const onQueryStoreStat = () => {
    console.log(keyWord.value);
//   loadData(true)
    onInit()
}

const searchTimer = ref(null)
const onUpdateVal = val => {
    console.log(keyWord.value);
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    onInit()
  }, 500)
}

const wsObj = ref({
  msgReceivePage:"",
  msgType: "callWaiterComplete",
  msgPlatform:"2",//0：后台 1：PC 2：H5  3：小程序
  msgContent:{
        messageId:"",
        orgCode:ls.get('ORG_CODE') ? ls.get('ORG_CODE'):'',
  }
})

const onDisposeWine = (v)=>{
    console.log(v);
    console.log(configStore.msgList);
    
    // wsObj.value.msgContent.messageId = v.messageId

    // sendWebSocket(wsObj.value)
    Api.Common.AppObjProcess.Do({ "functionName": "DoCallRoom", "contentData": {roomCode:v.roomCode} })
    .then(res=>{
      
        for (let i = configStore.msgList.length - 1; i >= 0; i--) {
            if (configStore.msgList[i].cruuentTime === v.cruuentTime) {
               
                configStore.msgList.splice(i, 1);
            }
        }
        ls.set('MSG_LIST',configStore.msgList)
    })
    // {"functionName":"DoCallRoom","contentData":{"roomCode":"0003010"},"orgCode":"0018"}

    // type 3跳转存酒 4跳转取酒
    // if (v.type==3) {
    //     router.push('/save')
    // } else {
    //     router.push('/take')
    // }
}
// 待处理、已处理切换
const onClickTab = (e)=>{
    
}
const onInit = ()=>{
    if(keyWord.value == ''){
        configStore.msgList = ls.get('MSG_LIST')
    }else{
        configStore.msgList = ls.get('MSG_LIST').filter(obj => {
            return obj.content.includes(keyWord.value);
        });
    }
    
}
onInit()
</script>

<style scoped lang="scss">
.notice-container {
    padding: 0 12px;
}
.notice-list {

}
.notice-item {
    background: #28282E;
    border-radius: 8px;
    padding: 16px 12px 12px 12px;
    margin-bottom: 10px;
    position: relative;

    :deep(.van-badge--dot) {
        width: 10px;
        height: 10px;
        position: absolute;
        top: 9px;
        right: 9px;
    }
    &-main {
        display: flex;
    }
    &-cover {
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    &-info {
        padding-left: 8px;
        flex: 1;
    }
    &-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    &-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 18px;
    }
    &-subtitle {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #CCCCCC;
        line-height: 12px;
    }
    &-desc {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #CCCCCC;
        line-height: 24px;
        padding-top: 12px;
    }
    &-panel {
        display: flex;
        justify-content: flex-end;
        padding-top: 9px;
    }
    &-btn {
        width: 90px;
        background: #5C5C66;
        border-radius: 4px;
        padding: 7px 0;
        margin-left: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 16px;
        text-align: center;
    }
    &-text {
        padding: 7px 0;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 16px;
    }
}
</style>
